body{
    background: url(/images/index/background/homepage_bg.jpg) no-repeat center top, url(/images/index/background/leaves.jpg) repeat-y center top, #1C0107;
    background-size: contain;
}


section{
    height: auto;
}

/** 打折样式 **/
.discount{
    display: flex;
    font-family: "motiva_sansregular";
    align-items: center;

    .discount-pct{
        line-height: 15px;
        font-weight: bold;
        color: #000000;
        background: #A1CD44;
        padding: 0 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        font-size: 12px;
        height: 15px;
        font-family:  Arial, Helvetica, sans-serif;
    }

    .discount-price{
        background-color: rgba(0,0,0,0.6);
        padding: 0 5px;

        .price-even{
            text-decoration: line-through;
            color: #848e94;
            font-size: 14px;
            font-family: Tahoma, Arial, Helvetica, sans-serif;
        }

        .price-now{
            font-size: 14px;
            color: #ffffff;
            padding-left: 4px;
            font-family: Tahoma, Arial, Helvetica, sans-serif;
        }
    }
}

/***** 商店导航栏 *****/
.page{
    margin-bottom: 80px;
    .store-header{
        .store-nav{
            background: #581c17;
            filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.3));

            ul{
                li{
                    span{
                        color: #fff;
                    }
                }
            }

            /*** 搜索栏 ***/
            .store-search{
                .searchBox{
                    background-color: #ad5244;

                    a{
                        filter: grayscale(1);
                    }
                }
            }
        }
    }

    /*** 头部内容 ***/
    .header-text{
        height: 350px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .text-img{
            width: 625px;
            height: 70%;
            position: relative;
            top: -20px;
            z-index: -999;
            background-image:url(/images/index/background/home_header_text_schinese.png) ;
            background-repeat:no-repeat ;
            background-size:contain ;
            filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.3));
        }
    }
}


.main-content{
    max-width: 1200px;
    margin: auto;
    padding:0 2%;
}
.focus-title{
    font-size: 17px;
    letter-spacing: 0.05em;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
    letter-spacing: 0.05em;
}
/***** 主要内容 *****/
.main{
    position: relative; 
    /*** 精选特惠 ***/
    .focus-discount{
        margin-bottom: 20px;



        .focus-goods{
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

            .focus-good{
                width: 31%;
                max-width: 340px;
                position: relative;
                font-size: 12px;
                box-shadow: 2.86px 6.67px 16.29px rgba(0, 0, 0, 0.781);
                margin-bottom: 12px;
                /* 记得关掉 */
                overflow: hidden;  
                transition: all 1s ease-in-out;

                &:hover{
                    top:-8px;
                    
                }

                a{
                    position: absolute;
                    display: block;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    z-index: 1;
                    text-decoration: none;
                }

                img{
                    max-width: 100%;
                }

                .discount{
                    position: absolute;
                    right: 0;
                    bottom: 5%;
                    transition: bottom 0.6s;
                    
                }

            }
        }
        
    }

    /*** 提名大奖 ***/
    .awardsBox{
         .awards{
             height: 160px;
             display: flex;
             align-items: center;
             background: url(/images/index/main/sale_page_banner_image.png) no-repeat center top;
             text-decoration: none;

             .awards-main{
                display: flex;
                flex-direction: column;
                justify-content: left;
                width: 580px;
                padding: 20px 40px 20px 50px;

                .awards-title{
                    // font-family: "motiva_sansregular";
                    font-family:  Sans-serif;
                    font-size: 40px;
                    font-weight: 900;
                    color: #000;
                    letter-spacing: -0.7px;
                    line-height: 44px;
                }
                .awards-remain{
                    font-size: 17px;
                    color: #000000;
                    font-weight: 500;
                }
             }

             .awards-nominate{
                font-family: "motiva_sansregular";
                width: 275px;
                height: 44px;
                padding: 8px 20px;
                text-align: center;
                box-sizing: border-box;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 1px;
                transition-timing-function: ease-in-out;
                transition-duration: .23s;
                filter: drop-shadow(0px 0px 9px rgba(223, 135, 20, 0.5));
                background: #ffc508;
                color: #000;
             }

             &:hover .awards-nominate{
                background: #ffe9a0;
                color: #312a0f;
                filter: drop-shadow(0px 0px 9px rgba(223, 135, 20, 1.0));
             }
         }
    }

    /*** 游戏推荐 ***/
    .games-recommend{
        margin-top: 80px;
        margin-bottom: 70px;

        .games-row{
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            margin: 0 -6px 12px -6px;

            .game-box{
                display: block;
                margin: 0 6px;
                position: relative;
                text-decoration: none;
                transition: all 1s ease-in-out;

                &:hover{
                    top:-5px;
                    
                }


                .games-img-vdo{
                    position: relative;
                    img{
                        opacity: 1;
                        transition: opacity 0.6s;
                        position: relative;
                        z-index: 2;
                        width: 100%;
                        display: block;
                        max-width: 100%;
                        box-shadow: 2px 2px 10px #000;
                    }
                    video{
                        width: 100%;
                        height: 100%;
                        z-index: 1;
                        position: absolute;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                    }
                }
            }
        }

        .games-row4{
            .game-box{
                width: 275px;

            }
        }

        .games-row3{
            .game-box{
                width: 374px;

        }
    }

    .focus-series{
        padding: 10px 0;

        .focus-series-goods{
            max-width: 1200px;
            margin: 16px auto 0;
            position: relative;

                .swiper-slide{
                    
                    text-align: center;
                    font-size: 18px;
                    background: #fff;
                    max-width: 373px;
            
                    /* Center slide text vertically */
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-pack: center;
                    -ms-flex-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    -webkit-align-items: center;
                    align-items: center;

                    a{
                        width: 100%;
                        img{
                            width: 100%;
                        }
                    }
                }

                .swiper-button{
                    
                    width: 45px;
                    height: 108px;
                    padding: 36px 11px;
                    cursor: pointer;
                    z-index: 3;

                    &:after{
                        color: #fff;
                        font-size: 30px;
                        font-weight: 800;
                    }

                    &:focus{
                        outline: none;
                    }

                    &-prev{
                        margin-left: -100px;
                        margin-top: -80px;
    
                        &:hover{
                            background: linear-gradient( to right, rgba( 171, 218, 244, 0.3) 5%,rgba( 171, 218, 244, 0) 95%);
                        }
                    }

                    &-next{
                        margin-right: -100px;
                        margin-top: -80px;
                        &:hover{
                            background: linear-gradient( to right, rgba( 171, 218, 244, 0) 5%,rgba( 171, 218, 244, 0.3) 95%);
                        }
                    }
                }

                .series-swiper{
                    position: relative;
                    margin-top: 10px;
                    height: 20px;
                    
                    .swiper-pagination-bullet{
                        border-radius: 3px;
                        width: 20px;
                        height: 10px;
                        margin: 0 5px ;
                        background-color: hsla(202,60%,100%,0.2);
                        &:focus{
                            outline: none;
                        }
                    }
                }
            
        }    
    }


    }

    .games-type{
        padding: 10px 0;
        margin: 16px auto 0;
        .type-title{
            display: flex;
            font-size: 17px;
            margin-bottom: 18px;
            font-weight: 300;
            color: #fff;
            font-family: 'motiva_sansregular';
            letter-spacing: 0.05em;
            align-items: center;
            
            // .title{
            //     color: inherit;
            // }
            .title-line{
                height: 1px;
                background: rgba(255, 255, 255, 0.4);
                margin: auto 0 auto 10px;
                flex: 1 1 10%;
            }
        }

        .games-type-goods{
            max-width: 1200px;
            position: relative;
            min-height: 200px;

            
           .swiper-container{
            justify-content: space-around;
            align-items: center;
               overflow: visible;
           }
            .swiper-slide{         
                text-align: center;
                font-size: 18px;

        
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                justify-content: space-around;
                
                a{
                    width: 23%;
                    transition: all 0.2s ease-in-out;
                    display: block;
                    position: relative;

                    &:hover{
                        transform: scale(1.14);

                        img{
                            filter: saturate(1.0);
                        }
                    }

                    img{
                        filter: saturate(0.3);
                        width: 100%;
                        position: relative;
                        transition: all 0.2s ease-in-out;
                    }

                    span{
                        display: inline-block;
                        font-weight: 700;
                        font-size: 20px;
                        position: absolute;
                        color: #fff;
                        z-index: 20;
                        left: 50%;
                        top: 50%;
                        font-family: 'Cinzel', serif;
                        transform: translate(-50% , -50%);
                    }

                }
            

            }
    
            .swiper-button{
                
                width: 45px;
                height: 108px;
                padding: 36px 11px;
                cursor: pointer;
                z-index: 3;
    
                &:after{
                    color: #fff;
                    font-size: 30px;
                    font-weight: 800;
                }

                &:focus{
                    outline: none;
                }

                &-prev{
                    margin-left: -55px;
                    margin-top: -80px;
    
                    &:hover{
                        background: linear-gradient( to right, rgba( 171, 218, 244, 0.3) 5%,rgba( 171, 218, 244, 0) 95%);
                    }
                }

                &-next{

                    margin-right: -55px;
                    margin-top: -80px;

                    &:hover{
                        background: linear-gradient( to right, rgba( 171, 218, 244, 0) 5%,rgba( 171, 218, 244, 0.3) 95%);
                    }
                }
            }

            .games-type-swiper{
                position: relative;
                margin-top: 40px;
                height: 20px;

                .swiper-pagination-bullet{
                    border-radius: 3px;
                    width: 20px;
                    height: 10px;
                    margin: 0 5px ;
                    background-color: hsla(202,60%,100%,0.2);
                    &:focus{
                        outline: none;
                    }
                }
            }
        }
    }
}